<template>
    <fragment>
        <el-submenu
        v-if="sideBar.children && sideBar.children.length"
        :index='sideBar.name'>
            <template slot="title">
                <i :class="'iconfont '+sideBar.meta.icon"></i>
                <span>{{$t('menu.' + sideBar.meta.menuName)}}</span>
            </template>
            <sidebar-item
            v-for="item in sideBar.children"
            :key='item.name'
            :sideBar='item'
            ></sidebar-item>
        </el-submenu>
        <el-menu-item v-else :index="sideBar.meta.url">
            <i :class="'iconfont '+sideBar.meta.icon"></i>
            <span slot="title">{{$t('menu.' + sideBar.meta.menuName)}}</span>
        </el-menu-item>
    </fragment>
</template>

<script>
export default {
  name: 'sidebarItem',
  props: {
    sideBar: {
      type: Object,
      required: true
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
